<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta_new" /}
</head>
<style>
    .loading {
        text-align: center;
        height: 0.3rem;
        line-height: 0.3rem;
        margin-top: 0.15rem;
        color: #C0C0C0;
        font-size: 12px;

    }
</style>
<body class="F5">
<div id="app" class="my-recommend-page">
    <!-- header -->
    <div class="header">
        <div class="header-height"></div>
        <div class="header-wrap">
            <div class="header-content">
                <div class="left">
                    <a href="{:url('index/user/index');}">
                        <div class="go-back"><img src="/static/images/go-back.png" alt=""></div>
                    </a>
                    <div class="text">我的推荐</div>
                </div>
                <div class="title"></div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="search-box">
            <img src="/static/images/search.png" alt="">
            <input type="text" id="phoneNum" placeholder="请输入手机号搜索">
        </div>
        <div class="list" id="rm_con">
            <!--<div class="item">
                <div class="avatar">
                    <img src="/static/images/avatar.png" alt="">
                </div>
                <div class="info">
                    <div class="nickname-box">
                        <div class="nickname">李希晨</div>
                        <div class="daren">
                            <img src="/static/images/daren-bg.png" alt="">
                            <div class="text">3级达人</div>
                        </div>
                    </div>
                    <div class="phone">185****6898</div>
                </div>
                <div class="right-row1">达人橱窗数:8</div>
                <div class="right-row2">时间:2023/07/02 13:50</div>
            </div>-->
        </div>
    </div>
</div>
<script src="/static/js/common.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script src="/static/js/api.js"></script>
<script>
    var mobile = '';
    var page = 1;
    var pagesize = 10;

    renderSonList('', page, pagesize);

    function search() {
        mobile = $('#phoneNum').val();
        page = 1;

        $('html, body').scrollTop(0);

        renderSonList(mobile, page, pagesize);
    }

    var user_id = '{$user_id}';

    $('#phoneNum').on('input', function () {
        search();
    });

    function renderSonList(mobile = '', incPage = 1, pagesize = 10) {
        sonList(mobile, incPage, pagesize).then(res => {
            if (res.result == 1) {
                var html = ''
                res.data.forEach(val => {
                    var direct = val.parent_user_id == user_id ? '<div class="daren"><img src="/static/images/daren-bg.png" alt=""><div class="text">直推</div></div>' : '';

                    html += `<div class="item">
                <div class="avatar">
                    <img src="`+ val.avatar +`" alt="">
                </div>
                <div class="info">
                    <div class="nickname-box">
                        <div class="nickname">`+ val.nickname +`</div>
                        `+ direct +`
                    </div>
                    <div class="phone">`+ val.mobile +`</div>
                </div>
                <div class="right-row1">达人橱窗数:1</div>
                <div class="right-row2">时间:`+ val.jointime +`</div>
            </div>`
                })

                page = incPage + 1;

                if (incPage == 1) {
                    $('#rm_con').html(html);
                }else{
                    $('#rm_con').append(html);
                }
            } else {
                if (incPage == 1) {
                    $('#rm_con').html('');
                } else {
                    layer.msg(res.msg)
                }
            }
        }).catch(error => {
            layer.msg('请求失败')
        });
    }

    window.addEventListener('scroll', function () {
        // 获取页面的滚动高度、视口高度和文档总高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

        // 判断是否滚动到页面底部
        if (scrollTop + clientHeight >= scrollHeight) {
            renderSonList(name, page, pagesize);
        }
    });
</script>
</body>
</html>